  <template>
      <div class="edit-popup">
          <el-card class="!border-none" shadow="never">
              <el-button v-perms="['thread:add/edit']" type="primary" :disabled="disabled">
                  <template #icon>
                      <icon name="local-icon-qiehuan" />
                  </template>
                  转移给其他人 </el-button
              ><el-button v-perms="['thread:add/edit']" type="primary" :disabled="disabled">
                  <template #icon>
                      <icon name="local-icon-huiche" />
                  </template>
                  创建合同
              </el-button>
          </el-card>
          <el-card class="mt-2 !border-none" shadow="never">
              <el-form
                  ref="formRef"
                  :model="formData"
                  label-width="200px"
                  :rules="formRules"
                  class="businessFormEdit"
                  :disabled="disabled"
                  :inline="true"
              >
                  <el-collapse v-model="activeNames">
                      <el-collapse-item title="基本信息" name="1">
                          <el-form-item label="商机名称" prop="businessName">
                              <el-input
                                  v-model="formData.businessName"
                                  placeholder="请输入商机名称"
                              />
                          </el-form-item>
                          <el-form-item label="对应客户" prop="privateCustomerCustomer">
                              <el-select
                                  class="flex-1"
                                  v-model="formData.privateCustomerCustomer"
                                  placeholder="请选择对应客户"
                              >
                                  <el-option label="张三" value="1" />
                                  <el-option label="李四" value="2" />
                                  <el-option label="王五" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="预计销售金额" prop="estimatedSalesAmount">
                              <el-input
                                  v-model="formData.estimatedSalesAmount"
                                  placeholder="请输入预计销售金额"
                              />
                          </el-form-item>
                          <el-form-item label="预计签单日期" prop="estimatedSigningDate">
                              <el-date-picker
                                  class="flex-1 !flex"
                                  v-model="formData.estimatedSigningDate"
                                  type="datetime"
                                  clearable
                                  value-format="YYYY-MM-DD hh:mm:ss"
                                  placeholder="请选择预计签单日期"
                              />
                          </el-form-item>
                          <el-form-item label="签单可能性" prop="signingPossibility">
                              <el-select
                                  class="flex-1"
                                  v-model="formData.signingPossibility"
                                  placeholder="请选择签单可能性"
                              >
                                  <el-option label="高" value="1" />
                                  <el-option label="中" value="2" />
                                  <el-option label="低" value="3" />
                              </el-select>
                          </el-form-item>
                      </el-collapse-item>
                      <el-collapse-item title="商机信息" name="2"
                          ><el-form-item label="商机类型" prop="businessType">
                              <el-select
                                  class="flex-1"
                                  v-model="formData.businessType"
                                  placeholder="请选择商机类型"
                              >
                                  <el-option label="一般商机" value="1" />
                                  <el-option label="特殊商机" value="2" />
                                  <el-option label="重要商机" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="商机获取日期" prop="businessGetdate">
                              <el-date-picker
                                  class="flex-1 !flex"
                                  v-model="formData.businessGetdate"
                                  type="datetime"
                                  clearable
                                  value-format="YYYY-MM-DD hh:mm:ss"
                                  placeholder="请选择商机获取日期"
                              />
                          </el-form-item>
                          <el-form-item label="商机来源" prop="businessSource">
                              <el-select
                                  class="flex-1"
                                  v-model="formData.businessSource"
                                  placeholder="请选择商机来源"
                              >
                                  <el-option label="广告" value="1" />
                                  <el-option label="社交推广" value="3" />
                                  <el-option label="研讨会" value="4" />
                                  <el-option label="搜索引擎" value="5" />
                                  <el-option label="客户介绍" value="6" />
                                  <el-option label="独立开发" value="7" />
                                  <el-option label="代理商" value="8" />
                                  <el-option label="其他" value="9" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="预设要点" prop="defaultPoint">
                              <el-input
                                  v-model="formData.defaultPoint"
                                  placeholder="请输入预设要点"
                              />
                          </el-form-item>
                          <el-form-item label="案件类型" prop="caseType">
                              <el-select
                                  class="flex-1"
                                  v-model="formData.caseType"
                                  placeholder="请选择案件类型"
                              >
                                  <el-option label="专利" value="1" />
                                  <el-option label="商标" value="2" />
                                  <el-option label="版权" value="3" />
                                  <el-option label="科技服务" value="4" />
                                  <el-option label="法律案件" value="5" />
                                  <el-option label="调查案" value="6" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="暂定交底名称" prop="pauseName">
                              <el-input
                                  v-model="formData.pauseName"
                                  placeholder="请输入暂定交底名称"
                              />
                          </el-form-item>
                          <el-form-item label="技术要点" prop="technical points">
                              <el-input
                                  v-model="formData.technicalPoints"
                                  placeholder="请输入技术要点"
                              />
                          </el-form-item>
                          <el-form-item label="摘要" prop="abstractText">
                              <el-input
                                  v-model="formData.abstractText"
                                  type="textarea"
                                  placeholder="请输入摘要"
                              />
                          </el-form-item>
                          <el-form-item label="备注" prop="remarks">
                              <el-input
                                  v-model="formData.remarks"
                                  placeholder="请输入备注"
                                  type="textarea"
                              />
                          </el-form-item>
                      </el-collapse-item>
                      <el-collapse-item title="跟进信息" name="3">
                          <el-form-item label="跟进状态" prop="followupStatus">
                              <el-select
                                  class="flex-1"
                                  v-model="formData.followupStatus"
                                  placeholder="请选择跟进状态"
                              >
                                  <el-option label="初步洽谈" value="1" />
                                  <el-option label="需求确定" value="2" />
                                  <el-option label="谈判/合同" value="3" />
                                  <el-option label="赢单" value="4" />
                                  <el-option label="输单" value="5" />
                                  <el-option label="方案/报价" value="6" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="下次跟进时间" prop="nextTime">
                              <el-date-picker
                                  class="flex-1 !flex"
                                  v-model="formData.nextTime"
                                  type="datetime"
                                  clearable
                                  value-format="YYYY-MM-DD hh:mm:ss"
                                  placeholder="请选择下次跟进时间"
                              />
                          </el-form-item>
                      </el-collapse-item>
                      <el-collapse-item title="人员信息" name="4">
                          <el-form-item label="业务人员" prop="fieldStaffId">
                              <el-select
                                  class="flex-1"
                                  v-model="formData.fieldStaffId"
                                  placeholder="请选择业务人员"
                              >
                                  <el-option label="张三" value="1" />
                                  <el-option label="李四" value="2" />
                                  <el-option label="王五" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="协作人" prop="collaboratorId">
                              <el-select
                                  class="flex-1"
                                  v-model="formData.collaboratorId"
                                  placeholder="请选择协作人"
                              >
                                  <el-option label="张三" value="1" />
                                  <el-option label="李四" value="2" />
                                  <el-option label="王五" value="3" /> </el-select></el-form-item
                      ></el-collapse-item>
                      <el-collapse-item title="其他信息" name="5">
                          <el-form-item label="主归属公司" prop="mainOwningCompanyid">
                              <el-input
                                  v-model="formData.mainOwningCompanyid"
                                  placeholder="请输入主归属公司"
                              />
                          </el-form-item>
                          <el-form-item label="副归属公司" prop="subsidiaryCompanyId">
                              <el-input
                                  v-model="formData.subsidiaryCompanyId"
                                  placeholder="请输入副归属公司"
                              />
                          </el-form-item>
                          <el-form-item label="所属部门" prop="department">
                              <el-input v-model="formData.department" placeholder="请输入所属部门" />
                          </el-form-item>
                          <el-form-item label="操作人" prop="userId">
                              <el-input v-model="formData.userId" placeholder="请输入操作人" />
                          </el-form-item>
                          <el-form-item label="更新于" prop="updatedOn">
                              <el-input v-model="formData.updatedOn" placeholder="请输入更新于" />
                          </el-form-item>
                      </el-collapse-item>
                  </el-collapse>
              </el-form>
          </el-card>

          <footer-btns>
              <el-button type="primary" @click="handleSubmit">保存</el-button>
          </footer-btns>
      </div>
  </template>
  <script lang="ts" setup>
  import type { FormInstance } from 'element-plus'
  import { businessEdit, businessAdd, businessDetail } from '@/api/business'
  import feedback from '@/utils/feedback'
  const emit = defineEmits(['success', 'close'])
  import useMultipleTabs from '@/hooks/useMultipleTabs'
  const route = useRoute()
  const router = useRouter()

  const activeNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9']

  const formData = reactive({
      id: '',
      businessName: '',
      privateCustomerCustomer: '',
      estimatedSalesAmount: '',
      estimatedSigningDate: '',
      department: '',
      signingPossibility: '',
      mainOwningCompanyid: '',
      subsidiaryCompanyId: '',
      updatedOn: '',
      businessType: '',
      businessGetdate: '',
      businessSource: '',
      defaultPoint: '',
      caseType: '',
      pauseName: '',
      technicalPoints: '',
      abstractText: '',
      businessSourceid: '',
      caseTypeid: '',
      fieldStaffId: '',
      collaboratorId: '',
      remarks: '',
      followupStatus: '',
      nextTime: '',
      userId: ''
  })

  const formRules = {
      businessName: [
          {
              required: true,
              message: '请输入商机名称',
              trigger: ['blur']
          }
      ],
      privateCustomerCustomer: [
          {
              required: true,
              message: '请选择对应客户',
              trigger: ['blur']
          }
      ],
      estimatedSigningDate: [
          {
              required: true,
              message: '请选择预计签单日期',
              trigger: ['blur']
          }
      ]
  }

  const { removeTab } = useMultipleTabs()
  const formRef = shallowRef<FormInstance>()
  const handleSubmit = async () => {
      await formRef.value?.validate()
      const data: any = { ...formData }
      if (route.query.id) {
          await businessEdit(data)
      } else {
          await businessAdd(data)
      }
      feedback.msgSuccess('操作成功')
      emit('success')
      removeTab()
      router.back()
  }

  const setFormData = async (data: Record<string, any>) => {
      for (const key in formData) {
          if (data[key] != null && data[key] != undefined) {
              //@ts-ignore
              formData[key] = data[key]
          }
      }
  }

  const getDetail = async () => {
      const data = await businessDetail({
          id: route.query.id
      })
      setFormData(data)
  }

  route.query.id && getDetail()

  const disabled = ref(false)

  const disabledAll = async () => {
      disabled.value = true
      getDetail()
  }

  route.query.type == 'check' && disabledAll()
  </script>

  <style>
  .businessFormEdit .el-form-item {
      width: 590px;
  }
  ::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
  }
  ::v-deep .el-collapse-item__wrap {
      padding-top: 40px;
  }
  </style>
